<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js表单</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
<!--        v-model会根据控件类型自动选取正确的方法来更新元素-->
        <p>input元素：</p>
        <input v-model="message" placeholder="编辑此处......">
        <p>编辑的内容是：{{message}}</p>

        <p>textarea元素:</p>
        <p style="white-space: pre">{{message2}}</p>
        <textarea v-model="message2" placeholder="多行文本输入......"></textarea>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                message:'Runoob',
                message2:'菜鸟教程\r\nhttp:/www.runoob.com'
            }
        })
    </script>



<!--    复选框，复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组-->
    <div id="app2">
        <p>单个复选框：</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>

        <p>多个复选框：</p>
        <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
        <label for="runoob">Runoob</label>
        <input type="checkbox" id="google" value="Google" v-model="checkedNames">
        <label for="google">Google</label>
        <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
        <label for="taobao">taobao</label>
        <br>
        <span>选择的值为: {{ checkedNames }}</span>
    </div>
    <script>
        new Vue({
            el: '#app2',
            data: {
                checked : false,
                checkedNames: []
            }
        })
    </script>



<!--    单选按钮的双向数据绑定-->
    <div id="app3">
        <input type="radio" id="runoob2" value="博尔特" v-model="picked">
        <label for="runoob">博尔特</label>
        <br>
        <input type="radio" id="google2" value="苏炳添" v-model="picked">
        <label for="google">苏炳添</label>
        <br>
        <span>选中值为: {{ picked }}</span>
    </div>
    <script>
        new Vue({
            el: '#app3',
            data: {
                picked : '博尔特'
            }
        })
    </script>



<!--    动态全选与反选-->
    <div id="app4">
        <p>全选<input type="checkbox" v-model="checks" @change="Numlist()"> {{ checks }}</p>
        <p>
            <label v-for="(list,index) in checkList">
                <input type="checkbox" v-model="checksListOn" :value="list.name">{{ list.name }}
            </label>
        </p>
        <p>{{ checksListOn }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app4',
            data: {
                checks:false,
                checkList: [
                    {id:1, name:'苹果'},
                    {id:2, name:'香蕉'},
                    {id:3, name:'栗子'},
                    {id:4, name:'橘子'}
                ],
                checksListOn: []
            },
            methods: {
                Numlist : function(){
                    if(this.checks){
                        var listArr=[];
                        for(var i=0;i<this.checkList.length;i++){
                            listArr.push(this.checkList[i].name);
                        }
                        this.checksListOn = listArr;
                    }else {
                        this.checksListOn = []
                    }
                }
            },
            watch: {
                "checksListOn":function () {
                    if(this.checksListOn.length == this.checkList.length){
                        this.checks = true
                    }else {
                        this.checks = false
                    }
                }
            },
        })
    </script>
</body>
</html>